<template>
  <div class="app-container work-list-container">
    <h4>我的工单</h4>
    <div class="filter-container">
      <el-row>
        <el-col :span="7">
          <el-input v-model="listQuery.code" clearable class="w-sm" style="width:320px" placeholder="工单编号"/>
        </el-col>
        <el-col :span="5">
          <el-input v-model="listQuery.description" clearable class="w-sm" placeholder="工单描述"/>
        </el-col>
        <el-col :span="5">
          <el-date-picker v-model="listQuery.startDate" clearable type="date" class="w-sm" value-format="yyyy-MM-dd" placeholder="开始时间"/>
        </el-col>
        <el-col :span="5">
          <el-date-picker v-model="listQuery.endDate" clearable type="date" class="w-sm" value-format="yyyy-MM-dd" placeholder="结束时间"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-select v-model="iStatusArr" multiple clearable filterable class="w-sm" style="width:320px; line-height:36px" placeholder="工单状态">
            <el-option v-for="item in istatusOptions" :key="item.key" :label="item.label" :value="item.key"/>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select v-model="listQuery.itype" clearable filterable class="w-sm" placeholder="工单类型">
            <el-option v-for="item in isTypeOptions" :key="item.key" :label="item.label" :value="item.key"/>
          </el-select>
        </el-col>
        <el-col v-if="userCode !== 'developer'" :span="5">
          <el-input v-model="listQuery.creatorName" clearable class="w-sm" placeholder="提交人"/>
        </el-col>
        <el-col :span="5">
          <el-input v-model="listQuery.opsName" clearable class="w-sm" placeholder="处理人"/>
        </el-col>
        <el-col :span="2">
          <el-button v-waves type="primary" icon="el-icon-search" @click="handleSearch">{{ $t('table.query') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table v-loading="listLoading" :key="tableKey" :data="list" element-loading-text="加载中" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="工单编号">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column width="440" align="center" label="描述">
        <template slot-scope="scope" show-overflow-tooltip>
          <a :href="'/#/worklist/workListDetails/'+scope.row.id" :title="scope.row.description" style="text-align:left" class="hand"><p v-if="scope.row.description.length <= 100 ">{{ scope.row.description }}</p><p v-else>{{ scope.row.description.slice(0, 100) + '...' }}</p></a>
        </template>
      </el-table-column>
      <el-table-column align="center" label="优先级">
        <template slot-scope="scope">
          <span>{{ priorityDict[scope.row.ilevel] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.itype < 0">其他</span><span v-else>{{ isTypeOptions[scope.row.itype].label }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="提交人">
        <template slot-scope="scope">
          <span>{{ scope.row.creatorName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="处理人">
        <template slot-scope="scope">
          <span>{{ scope.row.opsName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180" align="center" label="提交时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <span :style="{color : istatusOptions[scope.row.istatus].color}">{{ istatusOptions[scope.row.istatus].label }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <span><a :href="'/#/worklist/workListDetails/'+scope.row.id" class="hand">查看</a></span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
import {
  fetchList
} from '@/api/worklist/workList'

export default {
  name: 'Worklist',
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      listQuery: {
        code: '',
        startDate: '',
        endDate: '',
        statusArray: '',
        creatorName: '',
        opsName: '',
        itype: '',
        description: '',
        page: 1,
        limit: 10
      },
      list: [],
      total: 0,
      iStatusArr: [],
      userCode: store.getters.rolesCode,
      listLoading: false,

      // 状态
      istatusOptions: [
        { label: '待受理', key: 0, color: '#000000' },
        { label: '待处理', key: 1, color: '#295dff' },
        { label: '待确认', key: 2, color: '#ffc000' },
        { label: '已关闭', key: 3, color: '#d2d2d2' }
      ],

      // 类型
      isTypeOptions: [
        { label: '服务器', key: 0 },
        { label: '自动化发布', key: 1 },
        { label: '域名', key: 2 },
        { label: '修改配置', key: 3 },
        { label: '软件安装', key: 4 },
        { label: '其他', key: -1 }
      ],

      // 优先级
      priorityDict: {
        0: '一般',
        1: '重要',
        2: '紧急'
      }
    }
  },
  created() {
    if (this.userCode === 'ops') {
      this.iStatusArr = [0, 1]
    } else if (this.userCode === 'developer') {
      this.iStatusArr = [0, 1, 2]
    } else {
      this.iStatusArr = []
    }
    this.getList()
  },
  methods: {

    // 工单列表
    getList() {
      if (this.iStatusArr.length) {
        this.listQuery.statusArray = this.iStatusArr.toString()
      } else {
        this.listQuery.statusArray = ''
      }
      this.listLoading = true
      fetchList(this.listQuery).then(res => {
        if (res) {
          this.list = res.data.records
          this.total = res.data.total
        }
        this.listLoading = false
      })
    },

    // 搜索
    handleSearch() {
      this.listQuery.page = 1
      this.getList()
    },
    // 分页
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    // 当前分页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.work-list-container {
  padding: 30px;
  h4 {
    margin:0 0 30px;
  }
  h4:before {
    content: "";
    margin-right: 6px;
    border-left: 2px solid #2285e1;
  }
  .w-m {
    width:280px;
  }
  .w-sm {
    width:245px;
    margin-right:10px;
    margin-bottom:10px;
  }
  .hand {
    display: block;
    cursor: pointer;
    color:#0066d4;
  }
  .hand:hover {
    text-decoration: underline;
  }
}
</style>
